<!--
 * @Description: 
 * @Author: charles
 * @Date: 2021-05-05 22:02:56
 * @LastEditors: wangjx
 * @LastEditTime: 2022-01-10 18:59:05
-->
<template>
  <div ref="bottom1" style="height:95%"></div>
</template>

 <script>
 
 import {get} from '../../../utils/request'
 import { Pie } from '@antv/g2plot';
 export default {
   data() {
     return{
       dataArr:[]
     }
   },
   mounted(){ 
     this.initData()
    
   },
   methods:{
     initData(){
       get("/dashboard/queryDeviceOnlineNumber").then(res=>{
         console.log(3333,res);
         this.dataArr=res.data
         this.initChart()
       })
     },

     initChart(){
        const pie = new Pie(this.$refs.bottom1, {
        appendPadding: 10,
        data:this.dataArr,
        angleField: 'value',
        colorField: 'type',
        radius: 0.9,
        interactions: [{ type: 'element-active' }],
      });

      pie.render();

     }
   }
 }
 </script>